<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span style="color: rgb(64,158,255);">企业高管基本信息</span>
			<el-button style="float: right; margin-right: 60px;" type="text" icon="el-icon-circle-plus-outline"
				@click='handleAdd'>添加
			</el-button>
			<!-- 添加企业高管信息弹窗 -->
			<el-dialog title="企业高管基本信息" :visible.sync="dialogAddFormVisible" width="60%"
				@close="handleDialogClose('addForm')">
				<el-form :model="addForm" :rules="rules" ref="addForm">
					<div class="clearfix">
						<el-form-item label="高管编号" :label-width="formLabelWidth" style="width: 400px; float: left">
							<el-input autocomplete="off" style="width: 320px" readonly placeholder="系统自动生成"></el-input>
						</el-form-item>
						<el-form-item label="高管名称" :label-width="formLabelWidth"
							style="width: 400px; float: right; margin-right: 155px" prop="executiveName">
							<el-input v-model.trim="addForm.executiveName" autocomplete="off" style="width: 320px">
							</el-input>
						</el-form-item>
					</div>
					<div class="clearfix">
						<el-form-item label="职务" prop="post" required style="width: 400px; float: left;"
							:label-width="formLabelWidth">
							<el-select v-model="addForm.post" placeholder="请选择">
								<el-option v-for="item in postTypes" :key="item.postId" :label="item.postType"
									:value="item.postId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="性别" :label-width="formLabelWidth" style="float: left; margin-left: 25px;"
							prop="sex">
							<el-select v-model="addForm.sex" placeholder="请选择">
								<el-option v-for="item in sexTypes" :key="item.sexId" :label="item.sexType"
									:value="item.sexId">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="clearfix">
						<el-form-item label="出生日期" :label-width="formLabelWidth" style="float: left; margin: 0">
							<el-form-item prop="birthday">
								<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birthday"
									style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
							</el-form-item>
						</el-form-item>
						<el-form-item label="学历" :label-width="formLabelWidth" style="float: left; margin-left: 90px"
							prop="education">
							<el-select v-model="addForm.education" placeholder="请选择">
								<el-option v-for="item in educationTypes" :key="item.educationId"
									:label="item.educationType" :value="item.educationId">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="resetForm('addForm')">重置</el-button>
					<el-button type="primary" @click="handleAddForm">添加</el-button>
				</div>
			</el-dialog>
		</div>
		<!-- 企业高管信息列表 -->
		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column label="企业编号" prop="companyId" width="120px">
					<!-- 添加链接用template并且el-link -->
					<template slot-scope="scope">
						<el-link :href='`#/businessdetail/${scope.row.companyId}`' style='color: rgb(64,158,255);'>
							{{scope.row.companyId}}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column label="高管编号" prop="executiveId" width="120px">
					<!-- 添加链接用template并且el-link -->
					<template slot-scope="scope">
						<el-link :href='`#/executivedetail/${scope.row.executiveId}`' style='color: rgb(64,158,255);'>
							{{scope.row.executiveId}}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column label="高管名称" prop="executiveName"> </el-table-column>
				<el-table-column label="职务" prop="postName"> </el-table-column>
				<el-table-column label="性别" prop="sexName"> </el-table-column>
				<el-table-column label="出生日期" prop="birthday"> </el-table-column>
				<el-table-column label="学历" prop="educationName"> </el-table-column>
				<el-table-column label="登记日期" prop="registeredTime" width="150px">
				</el-table-column>
				<el-table-column label="更新日期" prop="updateTime" width="150px"> </el-table-column>
				<el-table-column width="250px" align="center">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEditForm(scope.row.executiveId)" type="primary" plain
							icon="el-icon-edit">修改
						</el-button>
					</template>
				</el-table-column>
		</el-table>
		<!-- 修改企业高管信息弹窗 -->
		<el-dialog title="企业高管基本信息" :visible.sync="dialogEditFormVisible" width="60%"
			@close="handleDialogClose('editForm')">
			<el-form :model="editForm" :rules="rules" ref="editForm">
				<div class="clearfix">
					<el-form-item label="高管编号" :label-width="formLabelWidth" style="width: 400px; float: left"
						prop='executiveId'>
						<el-input autocomplete="off" style="width: 320px" readonly v-model="editForm.executiveId">
						</el-input>
					</el-form-item>
					<el-form-item label="高管名称" :label-width="formLabelWidth"
						style="width: 400px; float: right; margin-right: 155px" prop="executiveName">
						<el-input v-model.trim="editForm.executiveName" autocomplete="off" style="width: 320px"></el-input>
					</el-form-item>
				</div>
				<div class="clearfix">
					<el-form-item label="职务" prop="post" required style="width: 400px; float: left;"
						:label-width="formLabelWidth">
						<el-select v-model="editForm.post" placeholder="请选择">
							<el-option v-for="item in postTypes" :key="item.postId" :label="item.postType"
								:value="item.postId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth" style="float: left; margin-left: 25px;"
						prop="sex">
						<el-select v-model="editForm.sex" placeholder="请选择">
							<el-option v-for="item in sexTypes" :key="item.sexId" :label="item.sexType"
								:value="item.sexId">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="clearfix">
					<el-form-item label="出生日期" :label-width="formLabelWidth" style="float: left; margin: 0">
						<el-form-item prop="birthday">
							<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birthday"
								style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
					</el-form-item>
					<el-form-item label="学历" :label-width="formLabelWidth" style="float: left; margin-left: 90px"
						prop="education">
						<el-select v-model="editForm.education" placeholder="请选择">
							<el-option v-for="item in educationTypes" :key="item.educationId"
								:label="item.educationType" :value="item.educationId">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="resetForm('editForm')">重置</el-button>
				<el-button type="primary" @click='handleSaveEdit'>保存</el-button>
			</div>
		</el-dialog>
		<div style="margin: 20px 0 20px 10px" class="clearfix">
			<el-button style="float: left;" type="primary" plain icon="el-icon-delete" @click='handleDelete'>删除所选记录
			</el-button>
		</div>
		<div class="block">
			<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="parseInt(tableData.length)">
			</el-pagination>
		</div>
	</el-card>
</template>

<script>
	import { Executive } from '@/api/';
	export default {
		props: ['id'],
		data() {
			return {
				tableData: [],
				search: '',
				dialogAddFormVisible: false,
				dialogEditFormVisible: false,
				currentPage: 1,
				pageSize: 10,
				tableData_length: '',
				addForm: {
					executiveId: "",
					companyId: "",
					executiveName: "",
					post: "",
					sex: "",
					birthday: "",
					education: "",
					registeredTime: "",
					updateTime: "",
				},
				postTypes: [],
				sexTypes: [],
				educationTypes: [],
				selectionList: [],
				rules: {
					executiveName: [
						{ required: true, message: "请输入高管名称!", trigger: "blur" },
						{ min: 2, max: 40, message: "长度在 2 到 40 个字符!", trigger: "blur" },
					],
					post: [{ required: true, message: "请输入高管职务!", trigger: "blur" }],
					sex: [{ required: true, message: "请输入性别!", trigger: "blur" }],
					birthday: [{ required: true, message: "请输入生日!", trigger: "blur" }],
					education: [{ required: true, message: "请输入学历!", trigger: "blur" }],
				},
				editForm: {},
				formLabelWidth: '120px'
			}
		},
		created() {
			// 加载全部企业高管信息;
			this.loadList(this.id);
			// 获取职业类型;
			this.loadPostTypes();
			// 获取性别类型
			this.loadSexTypes();
			// 加载教育类型
			this.loadEducationTypes();
		},
		methods: {
			// 加载全部高管信息;
			async loadList(id) {
				let {
					status,
					data
				} = await Executive.list({ id });
				if (status) {
					this.tableData = data;
					this.tableData_length = data.length;
					console.log(this.tableData);
				}
			},
			// 加载高管职业类型
			async loadPostTypes() {
				let {
					status,
					data
				} = await Executive.post();
				if (status) {
					this.postTypes = data;
				}
			},
			// 加载性别类型;
			async loadSexTypes() {
				let {
					status,
					data
				} = await Executive.sex();
				if (status) {
					this.sexTypes = data;
				}
			},
			// 加载教育类型;
			async loadEducationTypes() {
				let {
					status,
					data
				} = await Executive.education();
				if (status) {
					this.educationTypes = data;
				}
			},
			async handleEditForm(id) {
				this.dialogEditFormVisible = true;
				let { status, data } = await Executive.detail({ id });
				if (status) {
					this.editForm = data;
				}
			},
			handleAddForm() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						this.addForm.companyId = this.id;
						let { status, data } = await Executive.add({ ...this.addForm });
						if (status) {
							this.$message.success('添加成功!');
							this.tableData.push({ ...data });
							this.dialogAddFormVisible = false;
							this.$router.push(`/executivedetail/${data.executiveId}`);
						}
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.selectionList = [],
					// 记录所有选中的企业高管的编号，放在selectionList数组中
					val.forEach(element => {
						this.selectionList.push(element.executiveId);
					});
			},
			handleAdd() {
				this.dialogAddFormVisible = true;
			},
			handleDelete() {
				this.$confirm('此操作将永久删除用户,是否继续?', {
						type: 'warning'
					})
					.then(() => {
						this.selectionList.forEach(async (id) => {
							let { status, msg } = await Executive.remove({ id });
							this.loadList(this.id);
						});
						this.$message.success('删除成功！');
					})
					.catch(() => {
						this.$message.info('取消成功');
					});
			},
			// Dialog 关闭的回调,重置表单;
			handleDialogClose(form) {
				this.$refs[form].resetFields();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleSaveEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, data } = await Executive.edit({ ...this.editForm });
						if (status) {
							this.$message.success('修改成功!');
							// 修改DOM;
							this.loadList(this.id);
							this.dialogEditFormVisible = false;
						}
					}
				})
			},
			//每页条数改变时触发 选择一页显示多少行
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.currentPage = 1;
				this.pageSize = val;
			},
			//当前页改变时触发 跳转其他页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
			}
		}
	}
</script>

<style lang="less">
	.box-card {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20px;

		.block {
			width: 1200px;
			margin: 0 auto;
		}

		.clearfix::after {
			content: '';
			display: block;
			clear: both;
		}
	}
</style>
